<template>
  <div class="mustBuy">
    <mynavbar></mynavbar>
    <!-- 海报 -->
    <div class="poster">
        <img src="https://yanxuan.nosdn.127.net/fd5e3c77fd57431fb49bdb1442595cc8.jpg?imageView" alt="">
        <img src="https://yanxuan.nosdn.127.net/2088b045522f45cdaae6121ff0766819.jpg?imageView" alt="">
    </div>
    <!-- 分类列表-滚动导航组件 -->
    <van-tabs v-model="active" scrollspy sticky title-active-color="red">
        <van-tab v-for="(v,index) in mustBuyArr"  :title=" v" :key="index">
            <div class="content">
                <div v-if="index ==0" class="top10">
                    <img src="https://yanxuan.nosdn.127.net/8ae99782f17945099c2b4fec8840e26c.png?imageView">
                    <div class="bimai">
                        <div class="box" v-for="(v,index) in bimaiArr" :key="index" @click="fun(v.proid)">
                            <img :src="v.img2" alt="" v-if="index%2 ===0" />
                            <div class="text">
                                <div>
                                    <h4>{{ v.proname }}</h4>
                                    <p>{{v.desc}}</p>
                                </div>
                                <p class="text-p"> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="#de342f"/></span>
                                </p>
                            </div>
                            <img :src="v.img2" alt="" v-if="index%2!==0"/>
                        </div>
                    </div>
                </div>
                <div v-if="index ===1" class="hundred">
                    <img src="https://yanxuan.nosdn.127.net/47f4adf274c54e8fbfe75b3e3203ede2.png?imageView&type=webp">
                    <div class="paihang">
                        <div class="box" v-for="(v,index) in paihangArr" :key="index" @click="fun(v.proid)"> 
                            <img :src="v.img1"/>
                            <div class="text">
                                <p>{{v.proname }}</p>
                                <p> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="index ===2" class="hundred">
                    <img src="https://yanxuan.nosdn.127.net/a18fd3dee31f406cbab95f5382e95160.jpg?imageView&type=webp"></img>
                    <div class="paihang">
                        <div class="box" v-for="(v,index) in paihangArr" :key="index" @click="fun(v.proid)"> 
                            <img :src="v.img1"/>
                            <div class="text">
                                <p>{{v.proname }}</p>
                                <p> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="index ===3" class="hundred">
                    <img src="https://yanxuan.nosdn.127.net/0f18e7b61b964b91b8a1e7f911410a79.jpg?imageView&type=webp"></img>
                    <div class="paihang">
                        <div class="box" v-for="(v,index) in paihangArr" :key="index" @click="fun(v.proid)"> 
                            <img :src="v.img1"/>
                            <div class="text">
                                <p>{{v.proname }}</p>
                                <p> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="index ===4" class="hundred">
                    <img src="https://yanxuan.nosdn.127.net/47f4adf274c54e8fbfe75b3e3203ede2.png?imageView&type=webp"></img>
                    <div class="paihang">
                        <div class="box" v-for="(v,index) in paihangArr" :key="index" @click="fun(v.proid)"> 
                            <img :src="v.img1"/>
                            <div class="text">
                                <p>{{v.proname }}</p>
                                <p> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="index ===5" class="hundred">
                    <img src="https://yanxuan.nosdn.127.net/2a2a8ceaffd9420bbde961a74518449c.jpg?imageView&type=webp"></img>
                    <div class="paihang">
                        <div class="box" v-for="(v,index) in paihangArr" :key="index" @click="fun(v.proid)"> 
                            <img :src="v.img1"/>
                            <div class="text">
                                <p>{{v.proname }}</p>
                                <p> 
                                    <span><i>¥</i>
                                        {{ v.originprice }}</span>
                                    <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import mynavbar from '../../yjj/item/mynavbar.vue'
import service from '../../../request/service'

export default {
    data(){
        return{
            mustBuyArr:['必买TOP10','建党100周年','世界无聊日','银色情人节','三伏天','游泳'],
            bimaiArr:[],
            active:0,
            paihangArr:[],
            paihangArr1:[],
        }
    },
    components:{
        mynavbar
    },
    methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{id:v}})
            // this.$router.push(`/infogoods/${v}`)
        }
    },
    mounted(){
        service({
            url:'api/pro/seckilllist',
            method:'get',
            params:{
                count:2,
                limitNum:6,
            }
        }).then(res=>{
            this.bimaiArr = res.data.data
        }),
        service({
            url:'api/pro/seckilllist',
            method:'get',
            params:{
                count:3,
                limitNum:3,
            }
        }).then(res=>{
            this.paihangArr = res.data.data
        })
    }
}
</script>

<style scoped>
    .mustBuy{
        background: #67ce8b;
    }
    .poster img{
        width:100%;
    }
    .poster img:nth-child(2){
        margin: -3px 0;
    }

    /* 列表导航 */
    .mustBuy>>> .van-tabs__nav{
        background:#fff6e4;
        margin:0 10px;
        border-radius:10px;
    }
    .mustBuy>>> .van-tabs__wrap--scrollable .van-tab{
        padding: 0 .4rem;
    }
    .content{
        /* height: 18.75rem; */
        padding:0 .625rem;
    }
    .content .top10 img{
        width:100%;
    }

    /* top10必买 */
    .bimai{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .bimai .box{
        display:flex;
        justify-content: space-between;
        width:22.25rem;
        height:10rem;
        background: rgb(255, 255, 255);
        margin-bottom:.3125rem;
        border-radius:.525rem;
        padding:.6875rem;
        box-sizing:border-box;
    }
    .bimai .box .text{
        display:flex;
        justify-content: space-around;
        flex-direction: column;
        padding-left:.625rem;
        box-sizing: border-box;
        margin:0 .625rem;
    }
    .bimai .box .text h4{
        font-size:.75rem;
        font-weight: bold;
        line-height:1.25rem;
        margin-bottom:.4375rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden; 
    }
    .bimai .box .text p{
        font-size:.6875rem;
        color:#cacaca;
        line-height:.9375rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden; 
    }
    .bimai .box img{
        height:8.75rem;
        width:8.75rem;
    }
    .bimai .box .text .text-p{
        font-size:.9375rem;
        color:#de342f;
        display: flex;
        justify-content: space-between;
        align-items:center;
    }
    .bimai .box .text .text-p  .van-icon-cart-circle-o{
        font-size:1.875rem;
    }

    /* 建党一百年 */
    .hundred img{
        width:100%;
        height:5.625rem;
    }

    .paihang{
    /* height:100%; */
    /* background: #fbd66c; */
    column-count:3;
    column-gap:.3rem;
    box-sizing: border-box;
    padding:0 0.625rem;
    justify-content: space-around;
    display: flex;
    }
    .paihang .box {
    break-inside: avoid;
    border-radius: .625rem;
    background-color: #fff;
    margin-bottom: .9rem;
    width: 7.1875rem;
    height:12.375rem;
    /* width: 31%; */
    }
    .paihang .box img{
    height:7.1875rem;
    width: 7.1875rem;
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    }
    .paihang  .text{
    padding: 8px;
    text-align: left;
    font-weight: bold;
     height: 32%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .paihang  .text p:first-child{
    font-size: .6875rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    }
    .paihang  .text p:last-child{
    color: #f66;
    font-size: .6875rem;
    display:flex;
    justify-content: space-between;
    align-items:center;
    }
</style>